<template>
  <basic-container>
    <div v-show="showSearchFlag" class="flex-start m-t-20 m-b-10">
      <div class="flex-center">
        <search-vip-level class="m-r-20" width="200" @select="search.vipLevel=$event.ids;query"></search-vip-level>
        <el-input v-model="search.vipName" class="m-r-10" placeholder="请输入权益名称" size="small"
                  style="width: 300px;">

          <el-button slot="append" :loading="loading" icon="el-icon-search" size="small" type="primary" @click="query">
            查询
          </el-button>
        </el-input>
      </div>
    </div>
    <div class="flex-center m-b-10">
      <div></div>
      <div class="flex-center">
        <el-button :loading="loading" circle icon="el-icon-refresh" @click="query"></el-button>
        <el-button circle icon="el-icon-search" @click="showSearchFlag=!showSearchFlag"></el-button>
        <el-button type="primary" @click="showAddFlag=true">新增权益</el-button>
      </div>
    </div>
    <el-table v-loading="loading" :data="data" :header-cell-style="{background:'#eee',color:'#000'}" border
              class="my-table"
              style="width: 100%">
      <el-table-column align="center" label="序号" type="index" width="60"/>
      <el-table-column label="权益名称" prop="price" min-width="100">
        <template v-slot="scope">{{ scope.row.vipName | defaultValue }}</template>
      </el-table-column>
      <el-table-column label="权益等级" prop="price" min-width="100">
        <template v-slot="scope">{{ (scope.row.vipLevel && $store.state.dict.dictCache.vip_level[scope.row.vipLevel]) | defaultValue }}</template>
      </el-table-column>
      <el-table-column label="权益单价(元)" min-width="120">
        <template v-slot="scope">{{ scope.row.vipPrice | defaultValue }}</template>
      </el-table-column>
      <el-table-column label="是否开通多账号" min-width="160">
        <template v-slot="scope">{{ scope.row.isAccount===1?'是':'否' | defaultValue }}</template>
      </el-table-column>
      <el-table-column label="是否开通api接口" min-width="160">
        <template v-slot="scope">{{ scope.row.isApi===1?'是':'否' | defaultValue }}</template>
      </el-table-column>
      <el-table-column label="是否开通统计中心" min-width="160">
        <template v-slot="scope">{{ scope.row.isStatistics===1?'是':'否' | defaultValue }}</template>
      </el-table-column>
      <el-table-column label="设备数量"  min-width="100">
        <template v-slot="scope">{{ scope.row.macNum | defaultValue }}</template>
      </el-table-column>
      <el-table-column label="短信数量"  min-width="100">
        <template v-slot="scope">{{ scope.row.smsNum | defaultValue }}</template>
      </el-table-column>
      <el-table-column label="操作" fixed="right" min-width="150">
        <template v-slot="scope">
          <el-button icon="el-icon-edit" size="small" type="text" @click="edit(scope.row)">编辑</el-button>
          <el-button icon="el-icon-remove" size="small" type="text" @click="toRemove(scope.row)">删除</el-button>
        </template>
      </el-table-column>
    </el-table>
    <app-pagination ref="paginationRef" :page-size="page.size" :total="total" class="m-t-20" @change="pageChange"/>
    <div class="h-100px"></div>

    <el-dialog :visible.sync="showAddFlag" append-to-body :title="form.id?'修改权益':'新增权益'" width="500px">
      <el-form label-width="140px">
        <el-form-item label="权益名称">
          <el-input style="width: 200px" v-model="form.vipName" size="small"/>
        </el-form-item>
        <el-form-item label="权益等级">
          <search-vip-level width="200" title="" :default-value="form.vipLevel" @select="form.vipLevel=$event.ids"></search-vip-level>
        </el-form-item>
        <el-form-item label="权益单价">
          <el-input style="width: 200px" v-model="form.vipPrice" size="small">
            <span slot="suffix">元</span>
          </el-input>
        </el-form-item>
        <el-form-item label="是否开通多账号">
          <el-radio :label="1" v-model="form.isAccount">是</el-radio>
          <el-radio :label="0" v-model="form.isAccount">否</el-radio>
        </el-form-item>
        <el-form-item label="是否开通api接口">
          <el-radio :label="1" v-model="form.isApi">是</el-radio>
          <el-radio :label="0" v-model="form.isApi">否</el-radio>
        </el-form-item>
        <el-form-item label="是否开通统计中心">
          <el-radio :label="1" v-model="form.isStatistics">是</el-radio>
          <el-radio :label="0" v-model="form.isStatistics">否</el-radio>
        </el-form-item>
        <el-form-item label="设备数量上限">
          <el-input style="width: 200px" v-model="form.macNum" size="small"/>
          <span class="m-l-10">0代表无限</span>
        </el-form-item>
        <el-form-item label="短信数量上限">
          <el-input style="width: 200px" v-model="form.smsNum" size="small"/>
          <span class="m-l-10">0代表无限</span>
        </el-form-item>
        <el-form-item label="启用状态">
          <el-radio :label="1" v-model="form.enableStatus">启用</el-radio>
          <el-radio :label="0" v-model="form.enableStatus">停用</el-radio>
        </el-form-item>
      </el-form>
      <div class="dividing-line m-t-20 m-b-20"></div>
      <div class="flex-end">
        <el-button size="small" @click="closeAddAndEdit">取消</el-button>
        <el-button :loading="submitLoading" size="small" type="primary" @click="doConfirm">确定</el-button>
      </div>
    </el-dialog>
  </basic-container>
</template>

<script>
import AppPagination from "@/components/business/app-pagination";
import {
  equals,
  getRecords,
  getTotal,
  isListEmpty,
  isStringEmpty,
  msgError,
  isTrue,
  confirmWarning, msgSuccess
} from "@/util/common-util";
import AuthWrapper from "@/components/business/auth-wrapper";
import request from "@/router/axios";
import {deleteRecord} from "@/api/business/filling-team";
import SearchProduct from "@/components/SearchCondition/SearchProduct";
import SearchProductGroup from "@/components/SearchCondition/SearchProductGroup";
import {
  getIotProductList,
  getIotProductPage,
  getRandomCode,
  iotProductRemove,
  iotProductSubmit
} from "@/api/product/product";
import {facrightsPage, facrightsRemove, facrightsSubmit} from "@/api/product/client";
import SearchVipLevel from "@/components/SearchCondition/SearchVipLevel";


export default {
  name: "RightList",
  components: {SearchVipLevel, SearchProductGroup, SearchProduct, AuthWrapper, AppPagination},
  data() {
    return {
      page: {
        size: 20,
        current: 1
      },
      total: 0,
      searchDate: '',
      search: {
        vipName: '',
      },
      form: {
        macNum: '',
        smsNum: '',
        isStatistics: '',
        vipName: '',
        vipLevel: '',
        vipPrice: '',
        isAccount: '',
        isApi: '',
        enableStatus:''
      },
      showSearchFlag: true,
      loading: false,
      data: [{}],
      showAddFlag: false,
      submitLoading: false,
      isEdit: false,
    }
  },
  mounted() {
    this.query()
  },
  methods: {
    genCode() {
      getRandomCode({length: 10, isBig: 0}).then(res =>{
        this.form.productKey = res.data.data
      })
    },
    pageChange(_page) {
      this.page = _page
      this.query()
    },
    refresh() {
      this.$refs.paginationRef.reset()
    },
    query() {
      this.loading = true
      facrightsPage({...this.page, ...this.search}).then(res => {
        this.data = getRecords(res)
        this.total = getTotal(res)
        this.loading = false
      }).catch(() => {
        this.loading = false
      })
    },
    addNew() {
      this.showAddFlag = true
    },
    doConfirm() {
      if (isStringEmpty(this.form.macNum)) return msgError("请输入设备数量")
      if (isStringEmpty(this.form.smsNum)) return msgError("请输入短信数量")
      if (isStringEmpty(this.form.isStatistics)) return msgError("请输入productKey")
      if (isStringEmpty(this.form.vipName)) return msgError("请输入权益名称")
      if (isStringEmpty(this.form.vipLevel)) return msgError("请输入权益等级")
      if (isStringEmpty(this.form.vipPrice)) return msgError("请输入权益价格")
      if (isStringEmpty(this.form.isAccount)) return msgError("请输入是否开通多账号")
      this.submitLoading = true
      facrightsSubmit(this.form).then(res => {
        this.page.current = 1
        this.query()
        this.closeAddAndEdit()
      }).finally(_ => {
        this.submitLoading = false
      })
    },
    toDetail(row) {
     this.$emit('detail', row)
    },
    closeAddAndEdit() {
      this.showAddFlag = false
      this.form.macNum = ''
      this.form.smsNum = ''
      this.form.isStatistics = ''
      this.form.vipName = ''
      this.form.vipLevel = ''
      this.form.vipPrice = ''
      this.form.isAccount = ''
      this.form.isApi = ''
      this.form.id = null
    },
    toRemove(row) {
      confirmWarning('删除操作', `确定删除权益 ${row.vipName} ？`, () => {
        facrightsRemove({ids: row.id}).then(res => {
          this.query()
          msgSuccess()
        })
      })
    },
    edit(row) {
      this.form = {...row}
      this.showAddFlag = true
    }
  }
}
</script>

<style lang="scss" scoped>
.my-table {
  /deep/ .el-button--small {
    padding: 0 5px !important;
    font-size: 14px !important;
  }

  /deep/ td {
    padding: 8px 0 !important;
  }
}
</style>
